<style scoped>
  .echarts {
    height: 300px;
    width:100%;
  }
</style>
<template>
  <Row v-loading="spinShow" class="layout-content-body">
    <i-col :md="8">
      <chart :options="chartOptions" ></chart>
    </i-col>
    <i-col :md="16"></i-col>
  </Row>
</template>
<script>
  import api from '../../api'
  import {mapMutations, mapGetters, mapState} from 'vuex'
  import{inputString} from '../../libs/util'
  import dtable from '../../components/table/dtable.vue'
  export default {
    data () {
      return {
        loading: true,
        columns: [
          {
            title: '单位名称',
            key: 'name',
            sortable: true
          },
          {
            title: '登录次数',
            key: 'logincount',
            sortable: true,
          },
          {
            title: '观看次数',
            key: 'clicks',
            sortable: true,
          },
          {
            title: '观看时长',
            key: 'looklong',
            sortable: true
          },
        ],
        dataShow: true,//是否显示表格数据查看表单
        dataAll: [],
        spinShow: false,
        editData: false,
        addid: 0,
        chartOptions:{
          title: {text: '云存储空间统计'},
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            data: [],
            axisLabel:{interval: 0}
          },
//          grid: {
//            left: '3%',
//            right: '4%',
//            bottom: '3%',
//            containLabel: true
//          },
          yAxis: {},
          legend: {
//            data: ['2011年', '2012年','2013年']
          },
          series: [
//            {
//              name: '观看次数',
//              type: 'bar',
//              data: []
//            },
//            {
//              name: '观看时长',
//              type: 'bar',
//              data: []
//            }
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              roseType: 'angle',
              data:[
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'}
//                {value:310, name:'邮件营销'},
//                {value:335, name:'直接访问'},
//                {value:400, name:'搜索引擎'}
              ]
            }
            ]
        }
      }

    },
    components: {
      dtable,
    },
    computed: {
      ...mapState(['isLogin', 'captchaUrl', 'cptId', 'msg']),
      filiterTableDate(){
        let e = this.dataAll.slice()
        let keys = this.searchKey
        let filterData = function (element) {
          if (keys === "") {
            return true
          }
          for (let o in element) {
            if (String(element[o]).indexOf(keys) >= 0) {
              return true
            }
          }
          return false
        }
        let fdata = e.filter(filterData)
        this.total = fdata.length
        return fdata
      },
      curTableData() {
        let from = this.pageSize * (this.current - 1)
        let to = from + this.pageSize
        return this.filiterTableDate.slice(from, to)
      },
//      父资源
      parentRes() {
        let pr = []
        pr.push({Id: 0, Name: "根目录"})
        for (let e in this.dataAll) {
          if (this.dataAll[e].Type === 1 ) {
            pr.push({
              Name: this.dataAll[e].Name,
              Id: this.dataAll[e].Id
            })
          }
        }
        console.log(pr)
        return pr
      },
      isMenu(){
        if(Number(this.formItem.Type)===1){
          return false
        }else {
          return true
        }
      }
    },
    watch: {},
    methods: {
      getall (){
        this.spinShow = true
        api.StatisticsStore().then(response => {
          if (response.data.code === 0) {
            this.dataAll = response.data.Data
            console.log(this.dataAll)
            this.total = (response.data.Data).length
          } else {
            this.$Message.error(this.msg)
          }
        })
        setTimeout(() => {
          this.spinShow = false;
        }, 500);
      },
      show (row) {
        this.showItem = row
        this.showData = true
      },
    },
    mounted (){
      let self = this
      self.getall()
    }
  }
</script>


